<template>

	<!-- 漫游 -->
	<div class="roaming-box" :class="{'mini':_isMin}" v-show="_enable">
		<div class="rb-head">
			<div class="exit" @click="hBegin(false)"></div>
			<div class="showhide" :class="{'min':!_isMin}" @click="_isMin=!_isMin"></div>
		</div>
		<div class="rb-content">
			<div class="rb-set">
				<el-input-number :min="0.01" v-model="_speed"></el-input-number>
				<el-input-number :min="0.1" v-model="_eyeHeight"></el-input-number>
				<el-input-number :min="0.1" v-model="_jumpHeight"></el-input-number>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		onUnmounted,
		onMounted,
		nextTick,
		toRefs
	} from "vue";

	const _enable = ref(false);
	const _speed = ref(0.01);
	const _jumpHeight = ref(0.1);
	const _isMin = ref(true);
	const _eyeHeight = ref(0.1);

	//漫游高度
	watch(() => _eyeHeight.value, (p, l) => {
		//var h = (+p) - (+l);
		//	console.log("height",p);
		hCallOut("SetHeight", p);
	});

	//移动速度
	watch(() => _speed.value, (v) => {
		hCallOut("SetSpeed", v);
	});

	//跳起高度
	watch(() => _jumpHeight.value, (v) => {
		 hCallOut("SetJump", v);
	});
  

	const hBegin = (v) => {
		_isMin.value = false;
		console.log("开始漫游", v);
		_enable.value = v;
	}
	watch(_enable, (v) => {
		hCallOut("RoamEnable", v + ""); 
	});


	//事件抛出
	//外层绑定@onFn="hOnFn"
	//触发hEmit('onFn', t);
	const hEmit = defineEmits(['call']),
		hCallOut = (h, d) => {
			hEmit("call", "RoamSet", {
				h: h,
				dat: d
			});
		};



	const props = defineProps({
		begin: {
			type: Boolean
		},
	});
	defineExpose({
		hBegin,
	});
	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {});
</script>
<style scoped lang="scss">
	.roaming-box {

		pointer-events: all;
		width: 600px;
		height: 300px;
		letter-spacing: 1px;
		transition: .5s all;
		background-image: url(/imgs/stool/roam-bg.png);
		background-size: 100% 100%;

		.rb-head {
			height: 30px;
			pointer-events: all;
			line-height: 54px;
			margin-right: 2px;

			>div {
				margin-top: 10px;
				margin-right: 10px;
				width: 30px;
				height: 30px;
				float: right;
				border-radius: 10px;
				background: linear-gradient(to bottom, #ffffff50, #8d8d8d50), url(/imgs/stool/win-s.png);
				background-size: 100% 100%, 100% 100%;
				background-position: center, 1px 2px;
				cursor: pointer;
			}

			.exit {
				background: linear-gradient(to bottom, #ffffff50, #8d8d8d50), url(/imgs/stool/win-x.png);
				background-size: 100% 100%, 90% 90%;
				background-position: center, 2px 3px;
			}

			.min {
				background: linear-gradient(to bottom, #ffffff50, #8d8d8d50), url(/imgs/stool/win-.png);
				background-size: 100% 100%, 90% 80%;
				background-position: center, 2px 6px;
			}
		}

		.rb-content {

			width: 100%;
			height: calc(100% - 30px);


			.rb-set {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				float: right;
				height: 100%;
				margin-top: 10px;
				margin-right: -24px;
				width: 104px;
				position: relative;

				>div {
					width: 100% !important;
				}

				:deep(.el-input-number__decrease),
				:deep(.el-input-number__increase) {
					border-radius: 4px;
					background: linear-gradient(to bottom, rgb(238 238 238 / 50%), #279affd9);
					border-width: 0;
					color: #fff;
					font-size: 16px;
					font-weight: 600;
				}

				:deep(.el-input__wrapper) {
					box-shadow: none;
					background: none;
				}
			}

		}
	}

	.roaming-box.mini {
		background-image: url(/imgs/stool/roam-bg-mini.png) !important;
		height: 110px;

		.rb-set {
			flex-direction: row;
			justify-content: space-between;
			height: 33px;
			width: 78%;
			float: unset;
			margin: 19px auto 0 36px;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			>div {
				width: 25% !important;
			}
		}
	}

	:deep(.el-input__inner) {
		color: #eee;
		font-weight: bolder;
	}

	.rb-set input:focus {
		border: none;
	}

	.rb-set input {
		width: 60px;
		text-align: center;
		border: none;
		line-height: 20px;
		appearance: none;
		outline: none;
	}

	.rb-value input {
		background: #245275;
		border-radius: 6px;
		height: 30px;
		color: #eed40a;
		font-weight: 600;
	}
</style>